<!DOCTYPE HTML>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="scroll_support.js"></script>
<style>
#targetDiv {
  width: 500px;
  height: 500px;
  background: red;
}
html, body {
  /* Prevent any built-in browser overscroll features from consuming the scroll
   * deltas */
  overscroll-behavior: none;
}

</style>

<body style="margin:0;" onload=runTest()>
<div id="targetDiv">
</div>
</body>

<script>
var target_div = document.getElementById('targetDiv');
var overscrolled_x_deltas = [];
var overscrolled_y_deltas = [];
var scrollend_received = false;

function onOverscroll(event) {
  overscrolled_x_deltas.push(event.deltaX);
  overscrolled_y_deltas.push(event.deltaY);
}

function onScrollend(event) {
  scrollend_received = true;
}

document.addEventListener("overscroll", onOverscroll);
document.addEventListener("scrollend", onScrollend);

function runTest() {
  promise_test (async (t) => {
    await waitForCompositorCommit();

    // Scroll up on target div and wait for the doc to get overscroll event.
    await touchScrollInTarget(300, target_div, 'up');
    await waitFor(() => { return scrollend_received; },
        'Document did not receive scrollend event.');

    // Even though we request 300 pixels of scroll, the API above doesn't
    // guarantee how much scroll delta will be generated - different browsers
    // can consume different amounts for "touch slop" (for example). Ensure the
    // overscroll reaches at least 100 pixels which is a fairly conservative
    // value.
    assert_greater_than(overscrolled_y_deltas.length, 0, "There should be at least one overscroll events when overscrolling.");
    assert_equals(overscrolled_x_deltas.filter(function(x){ return x!=0; }).length, 0, "The deltaX attribute must be 0 when there is no scrolling in x direction.");
    assert_less_than_equal(Math.max(...overscrolled_y_deltas), 0, "The deltaY attribute must be <= 0 when there is overscrolling in up direction.");
    assert_less_than_equal(Math.min(...overscrolled_y_deltas),-100, "The deltaY attribute must be the number of pixels overscrolled.");

    await waitForCompositorCommit();
    overscrolled_x_deltas = [];
    overscrolled_y_deltas = [];
    scrollend_received = false;

    // Scroll left on target div and wait for the doc to get overscroll event.
    await touchScrollInTarget(300, target_div, 'left');
    await waitFor(() => { return scrollend_received; },
        'Document did not receive scrollend event.');

    // TODO(bokan): It looks like Chrome inappropriately filters some scroll
    // events despite |overscroll-behavior| being set to none. The overscroll
    // amount here has been loosened but this should be fixed in Chrome.
    // https://crbug.com/1112183.
    assert_greater_than(overscrolled_y_deltas.length, 0, "There should be at least one overscroll events when overscrolling.");
    assert_equals(overscrolled_y_deltas.filter(function(x){ return x!=0; }).length, 0, "The deltaY attribute must be 0 when there is no scrolling in y direction.");
    assert_less_than_equal(Math.max(...overscrolled_x_deltas), 0, "The deltaX attribute must be <= 0 when there is overscrolling in left direction.");
    assert_less_than_equal(Math.min(...overscrolled_x_deltas),-50, "The deltaX attribute must be the number of pixels overscrolled.");

  }, 'Tests that the document gets overscroll event with right deltaX/Y attributes.');
}
</script>
